<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>积分商城</title>
		 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
		<link rel="stylesheet" href="css/wzl-bootstrap.css" />
		<link rel="stylesheet" href="css/goods.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>


	</head>
	
	<body>
		<div id="goods-nav">
			<nav class="wzl-navbar navbar-default" role="navigation" >
		        <div class="container-fluid">
		            <div class="navbar-header">
		                <div class="wzl-nav-bar" onclick="history.back(-1)">
		                    <span class="glyphicon glyphicon-wzl-back" ></span>积分商城
		                </div>
		            </div>
		        </div>
		    </nav>
		</div>
		
		<div id="goods-section">
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5" id="bashiImg"><img src="img/goods/bashi.jpg" layer-src="img/goods/guzhen.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span >水上巴士</span> </p>
						<span>2号项王线（单人船票）</span><br>
						<span>价格：5元/张</span><br>
						<span class="detail"><a href="views/bashi.html">详情>></a></span>
						<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>
						
					</div>
				</li>

				<li class="col-xs-12 singleSelection" id="guZhenSelection">
					<div class="">金额：<span class="payMoney" value="5">5</span></div>
					<div class="">元(送<span class="points" value="50">5</span>元等值彩票)</div>
					<div class="pd-l-3">
						<span class="quantityReduce">-</span><input type="number" data-price="5" value="1"  class="quantity"/><span class="quantityAdd">+</span>
					</div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai" data-type="shbs" data-desc="水上巴士">立即购买</li>
			</ul>
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5" id="hbbwgImg"><img src="img/goods/hbbwg.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span>湖笔博物馆门票</span> </p>
						<span>价格：10元/张</span><br/>
						<span class="detail"><a href="views/hbbwg.html">详情>></a></span>
						<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>
					</div>
				</li>
				<li class="col-xs-12 singleSelection">
					<div class="">金额：<span class="payMoney" value="10">10</span></div>
					<div class="">元(送<span class="points" value="100">10</span>元等值彩票)</div>
					<div class="pd-l-3"><span class="quantityReduce">-</span><input type="number" data-price="10" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai" data-type="hbbwg" data-desc="湖笔博物馆门票">立即购买</li>
			</ul>	
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5" id="rhgImg"><img src="img/goods/rhg.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span>仁皇阁门票</span> </p>
						<span>价格：20元/张</span><br/>
						<span class="detail"><a href="views/rhg.html">详情>></a></span>
						<span class="stamp"><img src="img/goods/stamp.png" alt="" /></span>
					</div>
				</li>
				<li class="col-xs-12 singleSelection">
					<div class="">金额：<span class="payMoney" value="20">20</span></div>
					<div class="">元(送<span class="points" value="200">20</span>元等值彩票)</div>
					<div class="pd-l-3"><span class="quantityReduce">-</span><input type="number" data-price="20" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai" data-type="rhg" data-desc="仁皇阁门票">立即购买</li>
			</ul>			
		</div>

		<script src="js/jquery-1.8.0.min.js"></script>
		<script src="js/common.js"></script>
		<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
		<script src="js/goods.js"></script>
		<script>			

			var totalAmount;//总价

            layer.photos({
                photos: '#bashiImg'
				,full: true
				,closeBtn:1
                ,area: ['90%','']
            });
            layer.photos({
                photos: '#hbbwgImg'
                ,full: true
                ,closeBtn:1
                ,area: ['90%','']
            });
            layer.photos({
                photos: '#rhgImg'
                ,full: true
                ,closeBtn:1
                ,area: ['90%','']
            });

            //数量减
            $('.quantityReduce').on('click',function(){
                var $input = $(this).parent().find(".quantity");
                var reg = /(^[1-9]\d*$)/;//非零正整数
				if(!reg.test($input.val())){return}
				var quantity = parseInt($input.val());
				var price = parseInt($input.attr("data-price"));
				if(quantity>1){
                    quantity-=1;
                    $input.val(quantity);
                    changeMoney(price,quantity,this);
				}
            });
            //数量加
            $('.quantityAdd').on('click',function(){
                var $input = $(this).parent().find(".quantity");
                var reg = /(^[1-9]\d*$)/;//非零正整数
                if(!reg.test($input.val())){return}
                var quantity = parseInt($input.val());
                var price = parseInt($input.attr("data-price"));
				quantity+=1;
				$input.val(quantity);
                changeMoney(price,quantity,this);
            });
			//数量输入
            $('.quantity').change(function(event) {
				var reg = /(^[1-9]\d*$)/;//非零正整数
				var quantity = $(this).val();
                var price = parseInt($(this).attr("data-price"));
				if(!reg.test(quantity)){
					layer.tips("请输入整数",$(this));
                    $(this).val(1);
                    changeMoney(price,1,this);
					return;
				}
                changeMoney(price,quantity,this);
            });
            //计算金额及积分,传入加减和输入对象
			function changeMoney(price,quantity,me){
                var money = price*quantity;
                var $payMoney = $(me).parent().parent().find(".payMoney");
                var $points = $(me).parent().parent().find(".points");
                //金额
                $payMoney.attr("value",money);
                $payMoney.text(money);
                $points.text(money);
                //积分
                $points.attr("value",money*10);
			}

            $('.goumai').on('click',function(){
                var type = $(this).attr("data-type");
                var desc = $(this).attr("data-desc");
				var $li = $(this).parent().find(".singleSelection");
				var payMoney = $li.find(".payMoney").attr("value");
				var points = $li.find(".points").attr("value");
				var quantity = $li.find(".quantity").attr("value");
				var str = "type="+type+"&desc="+encodeURIComponent(desc)+"&payMoney="+payMoney+"&points="+points+"&quantity="+quantity;
				//layer.alert("您选择了"+desc+":"+quantity+"张，需要支付"+payMoney);
				window.location.href="goodsBuy.html?"+str;
            });




			//方法作废
			/*$('.btn').on('click',function(){
				var points=$(".Money").text().replace("元","");
				localStorage.setItem("points",points);
                //openid登录，不行就unionId登录，在不行就跳登录页
                var openid = window.localStorage.getItem("openid");
                var p = {};
                var json = {};
                json.wxOpenId = openid;
                p.paramStr = JSON.stringify(json);
                //后台利用openId登录
                Common.ajaxWithParamBack("/fenful/api/v1/login/wxOpenIdLogin", p, function(obj) {
                    var _path = "/fenful/h5/goods.html";
                    window.localStorage.setItem("_path", _path);
                    if(obj.code == "200"){
                        var data = eval('(' + obj.data + ')');
                        var token = data.token;
                        var phoneNum = data.phoneNum;
                        if(token&&phoneNum){
                            window.localStorage.setItem("phoneNum", phoneNum);
                            window.localStorage.setItem("token", token);
                            createOrder(phoneNum,totalAmount);
                        }else{
							window.location.href="/fenful/h5/login.html?_path="+_path;

						}

					}else{
                        //unionId登录
                        var unionId= Common.queryGetParam("unionId");
                        if(!unionId){
                            //非第三方跳转，又不能openid登录，直接跳登录页
                            window.location.href="/fenful/h5/login.html?_path="+_path;
                        }
                        //unionId登录
                        var param = {};
                        var paramStr = {};
                        paramStr.wxOpenId = openid;
                        paramStr.unionId = unionId;
                        param.paramStr = JSON.stringify(paramStr);
                        Common.ajaxWithParamBack("/fenful/api/v1/login/hzLogin", param, function(m) {
                            if(m.code == "200"){
                                var model = eval('(' + m.data + ')');
                                token = model.token;
                                phoneNum = model.phoneNum;
                                if(token&&phoneNum){
                                    window.localStorage.setItem("phoneNum", phoneNum);
                                    window.localStorage.setItem("token", token);
                                    createOrder(phoneNum,totalAmount);
                                }else{
                                    window.location.href="/fenful/h5/login.html?_path="+_path;
                                }
                            }else{
                                layer.msg(m.msg);
                                window.location.href="/fenful/h5/login.html?_path="+_path;
                            }
                        });

					}
				});
			});*/


			
		</script>
	</body>
</html>
